<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-19 15:40:51
 * @LastEditors: your name
 * @LastEditTime: 2021-06-24 14:07:07
 * @Description: file content
-->
<template>
  <div>
    <el-button type="primary" @click="handleCreate">
      新建
    </el-button>

    <el-table ref="table" class="mt10" :data="tableData" v-loading="loading" style="width: 100%" current-row-key="key"
      stripe border highlight-current-row>
      <el-table-column prop="key" label="Key" width="300" />
      <el-table-column label="字段">
        <template slot-scope="scope">
          <el-tag class="ml5 mr5 mt5 mb5" v-for="column in scope.row.columns" :key="scope.row.key + '_' + column.columnCode">{{ [column.columnCode,column.columnName] | codeName}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="uniqueFlag" label="唯一索引" width="120" align="center">
        <template slot-scope="scope">
          <el-checkbox disabled :value="scope.row.uniqueFlag"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="modifyBy" label="修改人" width="200" />
      <el-table-column prop="modifyDate" label="修改时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.modifyDate | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="actions" label="操作" width="180">
        <template slot-scope="scope">
          <span class="table-actionItem">
            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          </span>

          <span class="table-actionItem">
            <el-popconfirm title="确定要删除该索引吗？" placement="top" @confirm="handleDelete(scope.row)">
              <el-button class="link-danger" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <TableIndexForm ref="TableIndexForm" :modelInfo="modelInfo" @ok="loadData()" />
  </div>
</template>

<script>
import { getHmindexList, deleteHmindex } from '@/apis/paas/HmIndexController.js'
import TableIndexForm from './TableIndexForm'
import { cloneDeep } from "lodash";

export default {
  name: 'TableIndex',
  components: {
    TableIndexForm
  },

  props: {
    modelInfo: {
      type: Object,
      default: () => {
      }
    }
  },

  data () {
    return {
      loading: false,
      tableData: [],
    }
  },

  methods: {
    init () {
      this.loadData()
    },

    loadData () {
      getHmindexList({
        modelId: this.modelInfo.id
      }).then(res => {
        this.tableData = res
      })
    },
    handleCreate () {
      this.$refs.TableIndexForm.addForm()
    },

    handleView (record) {
      this.$refs.TableIndexForm.viewForm(cloneDeep(record))
    },

    handleDelete (record) {
      deleteHmindex([record.key]).then(res => {
        this.loadData()
        this.$message.success('操作成功')
      })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
